<template>
    <div class="invit">
        <header-bar :text="title" :left="left" ></header-bar>
        <div class="invit-header">
            <div class="products_sel">
                <ul style="font-weight:600;">
                    <li :class="{sel_active:item == sel}" @click="getData(item)" v-for="(item,index) in tabs" :key="index">{{item}}</li>
                </ul>
            </div>
        </div>
        <div class="invit-content" v-if="list.length > 0">
            <mt-cell title="好友" v-for="(item,index) in list" :key="index">
                <span>+{{item.profitValue}}</span>
                <img slot="icon"  v-if="item.invite.userphotos" :src="item.invite.userphotos" width="36" height="36" style="border-radiu:50%;overflow:hidden;margin-right:4px;">
                 <img slot="icon" src="../assets/header.png" alt=""  width="36" height="36" style="border-radiu:50%;overflow:hidden;margin-right:4px;">
            </mt-cell>
        </div>
        <div class="noData" v-else>暂无数据</div> 
    </div>
</template>

<script>
import headerBar from './main/header'
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import util from '../assets/js/util.js'
export default {
    data(){
        return{
            title: "累计邀请收益",
            left: {
                status: true
            },
            list:[],
            tabs:[],
            sel:""
        }
    },
    methods:{
        initList(){
            let params = {
                id:this.pageInfo.userinfo.id,
                coinType:this.sel
            };
            this.$ajaxGet("inviteProfit", params).then(res => {
                
                this.list = res.data;
            });
        },
        getData(item){
            this.sel = item;
            this.initList();
        },
        initUl(){
            this.tabs = JSON.parse(util.getLocalStorage('coinType'));
            this.sel = this.tabs[0]
            this.initList();
        }
    },
    computed:{
        ...mapState([
            "pageInfo"
        ])
    },
    mounted(){
        this.initUl();
       
    },
    components:{
        headerBar
    },
}
</script>

<style scoped>
@import url("../../static/css/invit.css");
.invit-header .sel_active::after{
    bottom: -16px;
}
</style>
